<template>
  <div class="color-tags">
    <div class="tag" :class="getColor()">{{words}}</div>
  </div>
</template>
<script >
export default{
  name:'colorTags',
  data(){
    return{
      words:this.title
    }
  },
  methods:{
    getColor(){
      return 'random-color-'+Math.floor(Math.random()*10)
    }
  }
  ,
  props:{
    title:{
      type:String,
      default(){
        return '?'
      }
    }
  }
}
</script>
<style>
.tag{
  display: inline-block;
  padding: 0 12px;
  color: white;
  border-radius: 10px;
  text-align: center;
  font-weight: 500;
  margin-bottom:5px;
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
cursor: pointer;
margin-right:10px ;
}
.random-color-0{
background-color:  #88ce9e;
opacity: 0.9;
border: 1px solid #2B8C4A;
}
.random-color-1{
background-color:  #F7CCAC;
opacity: 0.9;
border: 1px solid #3A3845;
color: #3A3845;
}
.random-color-2{
background-color:  #FAD9E6;
opacity: 0.9;
border: 1px solid #E4AEC5;
color:#243D25 ;
}
.random-color-3{
background-color:  #557B83;
opacity: 0.9;
border: 1px solid #39AEA9;
color: #A2D5AB;
}
.random-color-4{
background-color:  #61A4BC;
opacity: 0.9;
border: 1px solid #5B7DB1;
color: #1A132F;
}
.random-color-5{
background-color:  #97DBAE;
opacity: 0.9;
border: 1px solid #F4BBBB;
}
.random-color-6{
background-color:  #B7CADB;
opacity: 0.9;
border: 1px solid #DAB88B;
}
.random-color-7{
background-color:  #6FB2D2;
opacity: 0.9;
border: 1px solid #EBD671;
}
.random-color-8{
background-color:  #39AEA9;
opacity: 0.9;
border: 1px solid #557B83;
}
.random-color-9{
background-color:  #F68989;
opacity: 0.9;
border: 1px solid #243D25;
}

</style>